<template>
<div>
<h1>融资查询</h1>

  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="租房分期"  name="first">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="jrProductName"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankName"
          label="账户信息">
        </el-table-column>
        <el-table-column
          prop="bankCardNumber"
          label="银行卡号">
        </el-table-column>
        <!--    <el-table-column-->
        <!--      prop="address"-->
        <!--      label="分期期限">-->
        <!--    </el-table-column>-->
            <el-table-column
              label="还款方式">
              <template slot-scope="scope">
                <span v-if="scope.row.repaymentType==1">按月还款</span>
                <span v-if="scope.row.repaymentType==2">按季还款</span>
                <span v-if="scope.row.repaymentType==3">按租约周期支付</span>
              </template>
            </el-table-column>
        <el-table-column
          prop="creditLine"
          label="授信额度(%)">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.delFlg==0" style="color:#888">正常</span>
            <span v-if="scope.row.delFlg==1" style="color: red;">已作废</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.delFlg==0">
              <el-button type="primary" @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="warning" @click="xiugai(scope.row)">修改</el-button>
            </span>
            <span v-if="scope.row.delFlg==1">
<!--              已作废-->
              <el-button type="primary" @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="info">修改</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>

    </el-tab-pane>
    <el-tab-pane label="收房贷" name="second">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="jrProductName"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankName"
          label="账户信息">
        </el-table-column>
        <el-table-column
          prop="bankCardNumber"
          label="银行卡号">
        </el-table-column>
        <!--    <el-table-column-->
        <!--      prop="address"-->
        <!--      label="分期期限">-->
        <!--    </el-table-column>-->
        <el-table-column
          label="还款方式">
          <template slot-scope="scope">
            <span v-if="scope.row.repaymentType==1">按月还款</span>
            <span v-if="scope.row.repaymentType==2">按季还款</span>
            <span v-if="scope.row.repaymentType==3">按租约周期支付</span>
          </template>
        </el-table-column>
            <el-table-column
              prop="creditLine"
              label="授信额度(%)">
            </el-table-column>

      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.delFlg==0" >正常</span>
          <span v-if="scope.row.delFlg==1" style="color: red;">已作废</span>
        </template>
      </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.delFlg==0">
              <el-button type="primary" @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="warning" @click="xiugai(scope.row)">修改</el-button>
            </span>
            <span v-if="scope.row.delFlg==1">
<!--              已作废-->
              <el-button type="primary" @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="info">修改</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="应收租约保理" name="third">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="jrProductName"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankName"
          label="账户信息">
        </el-table-column>
        <el-table-column
          prop="bankCardNumber"
          label="银行卡号">
        </el-table-column>
        <!--    <el-table-column-->
        <!--      prop="address"-->
        <!--      label="分期期限">-->
        <!--    </el-table-column>-->
        <el-table-column
          label="还款方式">
          <template slot-scope="scope">
            <span v-if="scope.row.repaymentType==1">按月还款</span>
            <span v-if="scope.row.repaymentType==2">按季还款</span>
            <span v-if="scope.row.repaymentType==3">按租约周期支付</span>
          </template>
        </el-table-column>
            <el-table-column
              prop="creditLine"
              label="授信额度(%)">
            </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.delFlg==0">正常</span>
            <span v-if="scope.row.delFlg==1" style="color: red;">已作废</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.delFlg==0">
              <el-button type="primary" @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="warning" @click="xiugai(scope.row)">修改</el-button>
            </span>
            <span v-if="scope.row.delFlg==1">
<!--              已作废-->
              <el-button type="primary"  @click="chaKan(scope.row)">查看</el-button><br>
              <el-button type="info">修改</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
<!--分页-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="current"
    :page-sizes="sizes"
    :page-size="size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>

<!--查看:对话框-->
  <el-dialog title="查看租房分期产品" :visible.sync="dialogFormVisible">
    <el-form :inline="true" :model="form">
      <el-form-item :disabled="true" label="*产品名称">
        <el-input v-model="form.jrProductName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :disabled="true" label="*资金提供方" >
        <el-input v-model="form.companyName" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="分期期限">
        <el-radio-group v-model="form.resourcee">
          <el-radio label="11个月"></el-radio>
          <el-radio label="23个月"></el-radio>
        </el-radio-group>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*授信额度" >
        <el-input v-model="form.creditLine" autocomplete="off"></el-input>
      </el-form-item>%
      <el-form-item label="还款方式">
        <el-radio-group v-model="form.resource">
          <el-radio label="按月还款"></el-radio>
        </el-radio-group>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*支付PC链接(URL)" >
        <el-input v-model="form.urlPayPc" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*支付移动链接(URL)" >
        <el-input v-model="form.urlPayMoble" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*补全信息PC(URL)" >
        <el-input v-model="form.urlAddDetailInfoPc" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*补全信息移动(URL)" >
        <el-input v-model="form.urlAddDetailInfoMobile" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item :disabled="true" label="*App下载((URL)" >
        <el-input v-model="form.urlAppDownload" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="账户类型">
        <el-select v-model="form.a" placeholder="请选择">
          <el-option label="对公账户" value="1"></el-option>
          <el-option label="对私账户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :disabled="true" label="账户姓名" >
        <el-input v-model="form.accountName" autocomplete="off"></el-input>
      </el-form-item><br>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">返 回</el-button>
    </div>
  </el-dialog>






  <!--修改:对话框-->
  <el-dialog title="修改租房分期产品" :visible.sync="updateDialogFormVisible">
    <el-form :inline="true" :model="updateForm">
      <el-form-item label="*产品名称">
        <el-input  v-model="updateForm.jrProductName" ></el-input>
      </el-form-item>
      <el-form-item label="*资金提供方" >
        <el-input v-model="updateForm.companyName" ></el-input>
      </el-form-item><br>
      <el-form-item label="分期期限">
        <el-radio-group v-model="updateForm.resourcee">
          <el-radio label="11个月"></el-radio>
          <el-radio label="23个月"></el-radio>
        </el-radio-group>
      </el-form-item><br>
      <el-form-item label="*授信额度" >
        <el-input v-model="updateForm.creditLine" autocomplete="off"></el-input>
      </el-form-item>%
      <el-form-item label="还款方式">
        <el-radio-group v-model="updateForm.resource">
          <el-radio label="按月还款"></el-radio>
        </el-radio-group>
      </el-form-item><br>
      <el-form-item label="*支付PC链接(URL)" >
        <el-input v-model="updateForm.urlPayPc" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="*支付移动链接(URL)" >
        <el-input v-model="updateForm.urlPayMoble" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="*补全信息PC(URL)" >
        <el-input v-model="updateForm.urlAddDetailInfoPc" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="*补全信息移动(URL)" >
        <el-input v-model="updateForm.urlAddDetailInfoMobile" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="*App下载((URL)" >
        <el-input v-model="updateForm.urlAppDownload" autocomplete="off"></el-input>
      </el-form-item><br>
      <el-form-item label="账户类型">
        <el-select v-model="updateForm.a" placeholder="请选择">
          <el-option label="对公账户" value="1"></el-option>
          <el-option label="对私账户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="账户姓名" >
        <el-input v-model="updateForm.accountName" autocomplete="off"></el-input>
      </el-form-item><br>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="updateApp()">保 存</el-button>
    </div>
  </el-dialog>











</div>
</template>

<script>


import {listJinRong} from "@/views/jingrong/jinrong";
import {updateJinRong} from "@/views/jingrong/jinrong";

export default {
  name: "index",
  data() {
    return {
      tableData: [],
      activeName: 'first',
      index: 1,
      size: 10,
      sizes:[5,10,20,50],
      current:1,
      total:1,
      form:{},//详情对话框
      dialogFormVisible:false,
      updateForm:{},//修改
      updateDialogFormVisible:false,
    }
  }, created() {
    this.list();
  }, methods: {
    list() {
      console.log(this.index)
      let jrProductType = this.index;
      let size = this.size;
      let current = this.current;
      listJinRong(size, current, jrProductType).then(response => {//this.queryParams中包含部门名称/部门状态
        console.log(response)
        this.tableData = response.records;
        this.total=response.total;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.name)
      if (tab.name == 'first') {
        console.log("租房分期")
        this.index = 1;
        console.log(this.index)
      }
      if (tab.name == 'second') {
        console.log("收房贷")
        this.index = 2;
        console.log(this.index)
      }
      if (tab.name == 'third') {
        console.log("应收租约保理")
        this.index = 3;
        console.log(this.index)
      }
      this.list();
    },
    handleSizeChange(val) {//分页
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.list();
    },
    chaKan(row){
      this.dialogFormVisible=true;
      console.log(row.jrProductName)
      this.form.jrProductName=row.jrProductName
      this.form.companyName=row.companyName
      this.form.creditLine=row.creditLine
      this.form.resource=row.resource
      this.form.urlPayPc=row.urlPayPc
      this.form.urlPayMoble=row.urlPayMoble
      this.form.urlAddDetailInfoPc=row.urlAddDetailInfoPc
      this.form.urlAppDownload=row.urlAppDownload
      this.form.urlAddDetailInfoMobile=row.urlAddDetailInfoMobile
      this.form.a="对公账户"
      this.form.accountName=row.accountName
    },
    xiugai(row){//修改
      this.updateDialogFormVisible=true;
      this.updateForm=row;
    },
    updateApp(){
      console.log(this.updateForm)
      updateJinRong(this.updateForm).then(res => {//this.queryParams中包含部门名称/部门状态
        console.log(res)
        if (res.code==200){
          this.$message.success("修改成功!!!")
          this.list();
          this.updateDialogFormVisible=false;
        }else {
          this.$message.error("修改失败!!!")
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
